<template>
    <div class="price-admin">
        <div class="price-admin-top">
          <ul>
            <li>
              <span>物料</span>
              <a-input  placeholder="物料编号/零件号物料名称" />
            </li>
            <li>
              <span>物料状态</span>
              <a-select default-value="Zhejiang">
                <a-select-option value="Zhejiang">
                  Zhejiang
                </a-select-option>
                <a-select-option value="Jiangsu">
                  Jiangsu
                </a-select-option>
              </a-select>
            </li>
            <li class="price-top-btn">重置</li>
            <li class="price-search">查询</li>
            <li class="price-import">批量导入</li>
            <li class="price-export">批量导出</li>
          </ul>
        </div>
        <div class="price-admin-container">
          <p class="price-container-title">批量价格设置</p>
          <a-table :columns="columns" :data-source="dataList" :scroll="{ x: 1300, y: 300 }">
            <template
              v-for="col in ['name', 'age', 'address']"
              :slot="col"
              slot-scope="text, record, index"
            >
              <div :key="col">
                <a-input
                  v-if="record.editable"
                  style="margin: -5px 0"
                  :value="text"
                  @change="e => handleChange(e.target.value, record.key, col)"
                />
                <template v-else>
                  {{ text }}
                </template>
              </div>
            </template>
            <template slot="time" slot-scope="text">
              <a-date-picker @change="onChange" />
            </template>
            <template slot="operation" slot-scope="text, record, index" >
              <div class="editable-row-operations">
                <!-- <span v-if="record.editable">
                  <a @click="() => save(record.key)">Save</a>
                  <a @click="() => cancel(record.key)">Cancel</a>
                </span> -->
                <span>
                  <a-select size="small" default-value="Zhejiang">
                    <a-select-option value="Zhejiang">
                      Zhejiang
                    </a-select-option>
                    <a-select-option value="Jiangsu">
                      Jiangsu
                    </a-select-option>
                  </a-select>
                  <div class="price-table-btn price-edit" @click="edit(record.key)">价格设置</div>
                  <div class="price-table-btn price-trend" @click="isVisible = true">价格趋势</div>
                  <!-- <a :disabled="editingKey !== ''" @click="() => edit(record.key)">Edit</a> -->
                </span>
                <EjectBox :isVisible.sync='isVisible' :ejectTitle="ejectTitle">
                  <div class="eject-container">
                    <ul>
                      <li>物料名称:<span>机油</span></li>
                      <li>物料名称:<span>机油</span></li>
                      <li>物料名称:<span>机油</span></li>
                      <li>物料名称:<span>机油</span></li>
                      <li>最近一次更新时间:2021-03-17 12:50PM</li>
                    </ul>
                    <div class="eject-search">
                      <div class="eject-change-time">上次价格时间: <a-date-picker @change="onChange" /></div>
                      <div class="eject-change-time">上次价格时间: <a-date-picker @change="onChange" /></div>
                      <div class="eject-btn price-search">查询</div>
                      <div class="eject-btn price-top-btn">重置</div>
                    </div>
                    <div class="eject-table">
                      <div class="eject-table-tab">
                        <span class="table-tab-checked">含税价</span>
                        <span>不含税价</span>
                      </div>
                      <div class="price-export">批量导出</div>
                      <a-table :columns="columns" :data-source="data">
                        <a slot="name" slot-scope="text">{{ text }}</a>
                      </a-table>
                    </div>
                  </div>
                </EjectBox>
              </div>
            </template>
            
          </a-table>
        </div>
    </div>
</template>
<script>
import Vue from 'vue'
import {Table} from 'ant-design-vue'
import EjectBox from './ejectBox'
Vue.use(Table)
export default {
  components:{EjectBox},
    data() {
        return {
          isVisible: false,//是否展示弹框
          ejectTitle:'历史价格',//弹框标题
          columns:[
            {
              title: 'aa',
              dataIndex: 'key',
              scopedSlots: { customRender: 'key' },
              align: 'center'
            },
            {
              title: 'name',
              dataIndex: 'name',
              scopedSlots: { customRender: 'name' },
              align: 'center'
            },
            {
              title: 'age',
              dataIndex: 'age',
              scopedSlots: { customRender: 'age' },
              align: 'center'
            },
            {
              title: 'address',
              dataIndex: 'address',
              scopedSlots: { customRender: 'address' },
              align: 'center'
            },
            {
              title: 'time',
              dataIndex: 'time',
              scopedSlots: { customRender: 'time' },
            },
            {
              title: '操作',
              dataIndex: 'operation',
              width:104,
              scopedSlots: { customRender: 'operation' },
              fixed: 'right'
            },
          ],
          dataList:[{
              key: '1',
              name: 'John Brown',
              age: 32,
              address: 'New York Park',
              time:'2021',
              editable:false
            },
            {
              key: '2',
              name: 'Jim Green',
              age: 40,
              address: 'London Park',
              time:'2021',
              editable:false
            },
          ],
          cacheData:[{
              key: '1',
              name: 'John Brown',
              age: 32,
              address: 'New York Park',
            },
            {
              key: '2',
              name: 'Jim Green',
              age: 40,
              address: 'London Park',
            },
          ],
          editingKey: ''
        }
    },
    methods: {
      onChange(date, dateString) {
        console.log(date, dateString);
      },
      handleChange(value, key, column) {
        const newData = [...this.dataList];
        const target = newData.filter(item => key === item.key)[0];
        if (target) {
          target[column] = value;
          this.data = newData;
        }
      },
      edit(key) {
        console.log(key,'key')
        const newData = [...this.dataList];
        const target = newData.filter(item => key === item.key)[0];
        this.editingKey = key;
        console.log(target,'target')
        if (target) {
          target.editable = true;
          this.data = newData;
        }
      },
      save(key) {
        const newData = [...this.data];
        const newCacheData = [...this.cacheData];
        const target = newData.filter(item => key === item.key)[0];
        const targetCache = newCacheData.filter(item => key === item.key)[0];
        if (target && targetCache) {
          target.editable = false;
          this.data = newData;
          Object.assign(targetCache, target);
          this.cacheData = newCacheData;
        }
        this.editingKey = '';
      },
      cancel(key) {
        const newData = [...this.data];
        const target = newData.filter(item => key === item.key)[0];
        this.editingKey = '';
        if (target) {
          Object.assign(target, this.cacheData.filter(item => key === item.key)[0]);
          target.editable = false;
          this.data = newData;
        }
      },
    },
}
</script>
<style lang="less" scoped>
ul,li{list-style: none;margin: 0;padding: 0}
.price-admin {
  .price-top-btn,.price-search,.price-import,.price-export {
    height: 32px;
    margin-top: 8px;
    border: 1px solid #d8dbdf;
    text-align: center;
    line-height: 32px;
    font-size: 12px;
    color: @colorCommonFont;
    border-radius: 2px;
    margin-left: 8px;
    cursor: pointer;
  }
  .price-top-btn {
    width: 52px;
  }
  .price-search {
    width: 52px;
    color: #fff;
    background-color: @activeRed;
    border: 1px solid @activeRed;
  }
  .price-admin-top {
    width: 1016px;
    height: 48px;
    background: #fff;
    border-radius: 2px;
    padding: 0 16px;
    li {
      float: left;
      span {
        font-size: 12px;
      }
    }
    li:nth-of-type(2) {
      margin-left: 40px;
    }
    .price-import {
      width: 80px;
      margin-left: 164px;
      border: 1px solid @activeRed;
      background: #fff5f5;
      border-radius: 3px;
      color: @activeRed;
    }
    .price-export {
      width: 80px;
      margin-left: 8px;
      border-radius: 3px;
      background: #f2f4f6;
    }
    .ant-input,.ant-select {
      width: 200px;
      margin-top: 8px;
      margin-left: 8px;
    }
  }
  .price-admin-container {
    width: 1016px;
    background: #fff;
    margin-top: 8px;
    min-height: 468px;
    padding: 0 16px;
    font-size: 12px;
    .ant-select {
      width: 72px;
    }
  }
  .price-container-title {
    line-height: 40px;
    color:  @activeRed;
  }
  .price-table-btn {
    line-height: 24px;
    font-size: 12px;
    cursor: pointer;
  }
  .price-edit {
    color: @activeRed;
  }
  .price-trend {
    color: @activeBlue;
  }
  .eject-container {
    width: 996px;
    height: 556px;
    background: #fff;
    margin-top: 44px;
    border-radius: 2px;
    padding: 0 16px;
    ul {
      overflow: hidden;
      border-bottom: 1px solid #f4f7fb;
    }
    li {
      float: left;
      font-size: 14px;
      margin-right: 40px;
      line-height: 52px;
      span {
        font-weight: 600;
      }
    }
    li:last-child {
      float: right;
      margin-right: 0;
      color: #99A0A9;
    }
    .eject-search {
      width: 964px;
      border-bottom: 1px solid #f4f7fb;
      padding: 15px 0;
      font-size: 12px;
      .eject-btn {
        float: right;
      }
    }
    .eject-change-time {
      display: inline-block;
      margin-right: 8px;
    }
    .eject-table-tab {
      line-height: 32px;
      float: left;
      span {
        display: inline-block;
        border-bottom: 2px solid @sellerHubcolor;
        padding: 0 12px;
        cursor: pointer;
      }
      .table-tab-checked {
        color: @activeRed;
        border-bottom: 2px solid @activeRed;
      }
    }
    .price-export{
      width: 80px;
      float: right;
    }
  }
}
</style>